<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css" media="screen">
/*<![CDATA[*/
		body {
			font-size: small;
			font-family: Verdana,Arial,sans-serif;
			background-color: #ccc;
		}
		#container {
			background-color: #fff;
			width: 950px;
			margin-right: auto;
			margin-left: auto;
			margin-top: 10px;
			margin-bottom: 20px;
			padding: 20px;
		}
		ul.entries {
			margin-top: 5px;
			margin-bottom: 20px;
		}
		ul.entries li {
			line-height: 1.2em;
			margin-top: .5em;
			list-style: none;
		}
		ul.entries span.updated {
			font-size: 0.7em;
			color: #888;
		}
		table.am {
			margin-top: 5px;
			margin-bottom: 10px;
			border-spacing: .75em;
			/*margin-left: auto;
			margin-right: auto;*/
		}
		table.am th{
			vertical-align: bottom;
			font-weight: normal;
			border-bottom: 1px solid black;
			width: 27%;
		}
		table.am th.author {
			width: 19%;
		}
		table.am td{
			text-align: left;
			vertical-align: top;
			width: 27%;
		}
		table.am td.author {
			text-align: left;
			width: 19%;
		}
		h1, h2, h3 {
			margin-top: 10px;
			margin-bottom: 5px;
			font-style: normal;
			font-weight: normal;
		}
		h3 {
			margin-top: 5px;
			font-size: 1.1em;
		}
		h2 {
			font-size: 1.5em;
		}
		h1 {
			font-size: 1.7em;
		}
		.invalid, .errorMessage {
			background-color: #FCC;
		}
		.errorMessage {
			font-weight: bold;
			line-height:;
		}
		.ingroup {
			color: rgb(204,102,0);
			font-weight: bold;
		}
		.count {
			display: block;
			float: left;
			font-size: 1.5em;
			color: #777;
			padding-right: .5em;
			padding-bottom: .25em;
		}
		.sorting_asc {
			background: url('media/sort_asc.png') no-repeat center right;
		}

		.sorting_desc {
			background: url('media/sort_desc.png') no-repeat center right;
		}

		.sorting {
			background: url('media/sort_both.png') no-repeat center right;
		}
		.partBlurb {
			margin-top: .5em;
			margin-bottom: .5em;
		}
		/*]]>*/
		</style>
		<title>
			Evolution of symmetric ties on Buzz from {{referenceDate|date:"m/d/Y"}} to {{dateRun|date:"m/d/Y"}}
		</title>
	</head>
	<body>
		<div id="container">
			<h1>
				Evolution of symmetric ties on Buzz from {{referenceDate|date:"m/d/Y"}} to {{dateRun|date:"m/d/Y"}}
			</h1>
			<p>
				This table shows the evolution in symmetric following relations on Google Buzz for <span class="ingroup">participants</span> in <a href="http://AlgorithmicAdvertising.com/">Eastern Michigan University's Web Marketing Practicum, Summer 2010</a>. <span class='ingroup'>Bud Gibson</span> is the professor leading the course. Everyone else is a <span class='ingroup'>student</span>. Symmetric (mutual) following on Buzz merely indicates that two people are each interested in receiving the other's updates in that medium.  
			</p>
			<p>
				A goal of online networking is to help students enhance their professional networks. This table is provided to students to help them evaluate how effective buzz is for them in their networking activities.
			</p> 
			<table class='am' id='participants'>
				<thead>
					<tr>
						<th class='author'>
							Participant
						</th>
						<th>
							Symmetric ties ({{dateRun|date:"m/d/Y"}})
						</th>
						<th>
							Added since {{referenceDate|date:"m/d/Y"}}
						</th>
						<th>
							Subtracted since {{referenceDate|date:"m/d/Y"}}
						</th>
					</tr>
				</thead>
				<tbody>
					{% for participant in participants %}
					<tr>
						<td class="author">
							<span class='ingroup'>{{participant.displayName}}</span>
							<p class='partBlurb'>
								<img src='{{participant.thumbnailUrl}}' alt='{{participant.displayName}}' />
							</p>
							<p class='partBlurb'>
								<a target="_blank" title="Follow on Google Buzz" class="google-buzz-button" href="{{participant.profileUrl}}" data-button-style="follow">Follow on Buzz</a>
							</p>
						</td>
						<td>
							<span class='count' title='{{participant.mutual_count}}'>{{participant.mutual_count}}</span> {% for prs in participant.mutual %}<a href='{{prs.profileUrl}}' class='{{prs.groupLabel}}'>{{prs.displayName|safe}}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
						</td>
						<td>
							<span class='count' title='{{participant.mutual_gains_count}}'>{{participant.mutual_gains_count}}</span> {% for prs in participant.mutual_gains %}<a href='{{prs.profileUrl}}' class='{{prs.groupLabel}}'>{{prs.displayName|safe}}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
						</td>
						<td>
							<span class='count' title='{{participant.mutual_losses_count}}'>{{participant.mutual_losses_count}}</span> {% for prs in participant.mutual_losses %}<a href='{{prs.profileUrl}}' class='{{prs.groupLabel}}'>{{prs.displayName|safe}}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
						</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
		<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"> </script>		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
		<script type="text/javascript" src="media/jquery.dataTables.min.js"> </script>
		<script type="text/javascript">
		jQuery.fn.dataTableExt.oSort['title-numeric-asc']  = function(a,b) {
			var x = a.match(/title="*(-?[0-9]+)/)[1];
			var y = b.match(/title="*(-?[0-9]+)/)[1];
			x = parseFloat( x );
			y = parseFloat( y );
			return ((x < y) ? -1 : ((x > y) ?  1 : 0));
		};
		jQuery.fn.dataTableExt.oSort['title-numeric-desc'] = function(a,b) {
			var x = a.match(/title="*(-?[0-9]+)/)[1];
			var y = b.match(/title="*(-?[0-9]+)/)[1];
			x = parseFloat( x );
			y = parseFloat( y );
			return ((x < y) ?  1 : ((x > y) ? -1 : 0));
		};
		$(document).ready(function() {
			$('#participants').dataTable({
					"bPaginate": false,
					"bLengthChange": false,
					"bFilter": false,
					"bSort": true,
					"bInfo": false,
					"bAutoWidth": false, 
					"aoColumns": [
								null,
								{ "sType": "title-numeric" },
								{ "sType": "title-numeric" },
								{ "sType": "title-numeric" }
							]});
		});
		</script>
	</body>
</html>
